<template>
  <div>
    <div class="vs-table-box">
      <div class="small-box">
        <div class="phna">
          <p>会员充值</p>
        </div>
      </div>
      <div class="big-box">
        <el-form v-loading="loading" :model="form" :rules="rules" label-position="right" label-width="140px" ref="ruleForm">
          <el-form-item label="会员卡号：">
            <span>{{ info.vip_no }}</span>
          </el-form-item>
          <el-form-item label="姓名：">
            <span>{{ info.realname }}</span>
          </el-form-item>
          <el-form-item label="手机号：">
            <span>{{ info.phone }}</span>
          </el-form-item>
          <el-form-item label="账户余额：">
            <span>{{ info.balance }}</span>
          </el-form-item>
          <el-form-item label="充值时间：" prop="date">
            <el-date-picker style="width: 260px" v-model="form.date" value-format="yyyy-MM-dd" type="date" placeholder="请选择"> </el-date-picker>
          </el-form-item>
          <el-form-item label="充值金额：" prop="price">
            <el-input v-model="form.price" placeholder="请输入" style="width: 260px"></el-input>
          </el-form-item>
          <el-form-item label="充值方式:" prop="pay_type">
            <el-radio-group v-model="form.pay_type">
              <!-- 1:微信支付 2:支付宝支付 3:银行卡  4:现金 -->
              <el-radio label="1">微信</el-radio>
              <el-radio label="2">支付宝</el-radio>
              <el-radio label="3">银行卡</el-radio>
              <el-radio label="4">现金</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="充值员工：" prop="staff_id">
            <el-select v-model="form.staff_id" filterable style="width: 260px" placeholder="请选择">
              <el-option v-for="item in stafff" :key="item.id" :label="item.name" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="备注" class="vs-w-500">
            <el-input v-model="form.remark" type="textarea" :rows="4" placeholder=""></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="vs-bottom-btns btns">
        <el-button @click="utils.backPage()">取消</el-button>
        <el-button @click="subitm" :loading="isBtn" type="primary">立即充值</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        isBtn: false,
        form: {
          date: '',
          staff_id: '',
          user_id: '',
          pay_type: '1',
          price: '',
          remark: '',
        },
        info: {}, //个人信息,
        stafff: [], //员工列表
        rules: {
          price: [{ required: true, message: '请输入充值金额', trigger: 'blur' }],
          staff_id: [{ required: true, message: '请选择员工', trigger: 'change' }],
          date: [{ required: true, message: '请选择时间', trigger: 'change' }],
          pay_type: [{ required: true, message: '请选择支付方式', trigger: 'change' }],
        },
      };
    },
    created() {
      this.form.user_id = this.$route.query.id;
      this.getStaff();
      this.getUser();
      // 获取当前时间
      let date = new Date();
      this.form.date = this.utils.time(date);
    },
    methods: {
      subitm() {
        this.$refs['ruleForm'].validate(async (valid) => {
          if (!valid) return;
          this.isBtn = true;
          let { code, data } = await this.$Http.setUserRecharge(this.form);
          this.isBtn = false;
          if (code) {
            this.utils.backPage();
            this.$message.success('充值成功');
          }
        });
      },
      //   获取会员详情
      async getUser() {
        let { code, data } = await this.$Http.getUser({ id: this.form.user_id });
        this.info = data;
      },
      // 获取员工列表
      async getStaff() {
        let { code, data } = await this.$Http.getStaff({ is_all: 1, status: 1 });
        this.stafff = data;
      },
    },
  };
</script>
<style lang="scss" scoped>
  .vs-table-box {
  }
</style>
